<template>
	<view>
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="action" @tap="operate()">
					<text v-if="cart.operate">完成</text>
					<text v-else>管理</text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					购物车
					<text class="text-sm">（共{{ cart.cartnum }}件宝贝）</text>
				</view>
			</view>
		</view>
		<block v-if="cart.list.length > 0">
			<view
				class="wanl-cart-shop radius-bock margin-bj padding-bj"
				v-for="(item, index) in cart.list"
				:key="index"
			>
				<view class="shop margin-bottom" @tap="onShop(item.shop_id)">
					<!-- 店铺选择 -->
					<view class="text-xxl margin-right-sm" @tap.stop="shopchoose(item)">
						<text v-if="item.check" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="shopname">
						<text class="wlIcon-dianpu1 margin-right-xs"></text>
						<text class="text-30">{{ item.shop_name }}</text>
					</view>
					<view class="info"><text class="wlIcon-fanhui2 margin-left-xs"></text></view>
				</view>
				<view class="wanl-cart-goods" v-for="(goods, keys) in item.products" :key="keys">
					<!-- 商品选择 -->
					<view
						class="text-xxl margin-right-sm"
						@tap="choose({ index: index, keys: keys })"
					>
						<text v-if="goods.checked" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="picture" @tap="onGoods(goods.goods_id)">
						<image
							:src="$wanlshop.oss(goods.image, 100, 100, 1)"
							mode="aspectFill"
						></image>
					</view>
					<view class="content">
						<view class="text-cut-2 wanl-gray-dark" @tap="onGoods(goods.goods_id)">
							{{ goods.title }}
						</view>
						<view class="cu-tag wanl-gray opt">
							规格：{{ goods.sku.difference.join(' ') }}
						</view>
						<view class="flex justify-between align-center">
							<view class="text-price wanl-orange text-lg">
								{{ goods.sku.price }}
							</view>
							<view class="wanl-numberBox solid">
								<view @tap="bcsub(goods)">
									<text class="wlIcon-jian round text-gray"></text>
								</view>
								<view>{{ goods.number }}</view>
								<view @tap="bcadd(goods)">
									<text class="wlIcon-tianjia round"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block class="margin-bj padding-bj" v-else>
			<wanl-empty src="cart_default3x" text="哎呀，购物车空空如也！" />
			<wanl-product :dataList="likeData" />
		</block>
		<uni-load-more :status="status" :content-text="contentText" />
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view class="safeAreaBottom"></view>
		<!-- 操作栏 -->
		<view class="wanl-cart-foot fixedView solid-top edit" v-if="cart.operate">
			<view class="flex align-center" @tap="toCartchoose()">
				<view class="text-xxl">
					<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
					<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
				</view>
				<view class="margin-left-sm">
					<text>{{ cart.status ? '取消' : '全选' }}</text>
				</view>
			</view>
			<view class="flex">
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">移动关注</button>
				<button v-else class="cu-btn round line-orange" @tap="move()">移动关注</button>
				<button class="cu-btn round line-orange" @tap="toEmpty()">快速清理</button>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">删除</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="del()">删除</button>
			</view>
		</view>
		<view class="wanl-cart-foot fixedView solid-top account" v-else>
			<view class="flex align-center" @tap="toCartchoose()">
				<view class="text-xxl">
					<text v-if="cart.status" class="wlIcon-xuanze-danxuan wanl-orange"></text>
					<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
				</view>
				<view class="margin-left-sm">
					<text>{{ cart.status ? '取消' : '全选' }}</text>
				</view>
			</view>
			<view class="flex">
				<view class="text-sm text-right">
					<view>
						合计：
						<text class="text-price wanl-orange text-lg">{{ cart.allsum }}</text>
					</view>
					<view>不含运费</view>
				</view>
				<button v-if="cart.allnum == 0" class="cu-btn round line-gray">去结算</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="settlement()">
					去结算 ({{ cart.allnum }})
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			reload: true,
			likeData: [],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		};
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadlikeData();
		}
	},
	computed: {
		...mapState(['cart', 'common'])
	},
	onShow() {
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor:
					this.$store.state.common.appStyle.cart_font_color == 'light'
						? '#ffffff'
						: '#000000',
				backgroundColor: this.$store.state.common.appStyle.cart_nav_color
			});
		}, 200);
	},
	onLoad() {
		// 加载猜你喜欢
		this.loadlikeData();
	},
	methods: {
		...mapActions({
			operate: 'cart/operate', // 管理购物车
			choose: 'cart/choose', // 选择商品
			shopchoose: 'cart/shopchoose', // 选择店铺
			bcadd: 'cart/bcadd', // 添加数量
			bcsub: 'cart/bcsub', // 减少数量
			move: 'cart/move', // 移动购物车
			settlement: 'cart/settlement', // 结算购物车
			del: 'cart/del' // 删除选中购物车
		}),
		async loadlikeData() {
			await uni.request({
				url: '/wanlshop/product/likes?pages=cart',
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data.data); //评论数据 追加
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = 'more';
				}
			});
		},
		// 禁止空购物车点击全选
		toCartchoose() {
			if (this.$store.state.cart.list.length == 0) {
				uni.showModal({
					content: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~',
					success: res => {
						if (res.confirm) {
							this.$wanlshop.on('/pages/category');
						}
					}
				});
			} else {
				this.$store.dispatch('cart/cartchoose');
			}
		},
		toEmpty() {
			uni.showModal({
				content: '确定清空购物车？',
				success: res => {
					if (res.confirm) {
						this.$store.dispatch('cart/empty');
					}
				}
			});
		}
	}
};
</script>

<style>
.wanl-gray-light {
	color: #eee;
}

.wanl-cart-shop {
	background-color: #ffffff;
}

/* #ifndef MP-ALIPAY */
.wanl-cart-shop radio::before,
.wanl-cart-shop checkbox::before {
	margin-top: -7px;
	right: 1px;
}

.wanl-cart-shop radio .wx-radio-input,
.wanl-cart-shop checkbox .wx-checkbox-input,
.wanl-cart-shop radio .uni-radio-input,
.wanl-cart-shop checkbox .uni-checkbox-input {
	margin: 0;
	width: 16px;
	height: 16px;
}

/* #endif */
.wanl-cart-shop checkbox-group {
	margin-right: 25rpx;
}

.wanl-cart-shop .shop {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wanl-cart-shop .shop .shopname {
	position: absolute;
	display: flex;
	align-items: center;
	left: 60rpx;
}

.wanl-cart-shop .shop uni-checkbox .uni-checkbox-input {
	border: 1px solid #cccccc;
}

/* 商品 */
.wanl-cart-goods {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.wanl-cart-goods:last-child {
	margin-bottom: 18rpx;
}

.wanl-cart-goods .picture {
	width: 180rpx;
	height: 180rpx;
}

.wanl-cart-goods .picture image {
	width: 180rpx;
	height: 180rpx;
	overflow: hidden;
	border-radius: 20rpx;
}
/* 1.0.6升级 */
.wanl-cart-goods .content {
	padding-left: 25rpx;
	width: 100%;
	overflow: hidden;
}

.wanl-cart-goods .content .opt {
	font-size: 24rpx;
	padding: 0;
	color: #000000;
	height: 32rpx;
	background-color: #f6f6f6;
	font-weight: 300;
	margin-top: 10rpx;
	margin-bottom: 25rpx;
	border-radius: 4rpx;
}

.wanl-cart-goods .content .opt text {
	padding-right: 6rpx;
	padding-left: 10rpx;
}

/* 操作条 */
.wanl-cart-foot {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 997;
	min-height: 52px;
	background-color: #ffffff;
	padding: 0 25rpx;
}

.wanl-cart-foot.solid:after {
}

/* #ifndef MP-ALIPAY */
.wanl-cart-foot radio:before,
.wanl-cart-foot checkbox:before {
	margin-top: -7px;
	right: 1px;
}

.wanl-cart-foot radio .wx-radio-input,
.wanl-cart-foot checkbox .wx-checkbox-input,
.wanl-cart-foot radio .uni-radio-input,
.wanl-cart-foot checkbox .uni-checkbox-input {
	margin: 0;
	width: 16px;
	height: 16px;
}

/* #endif */
.wanl-cart-foot.account button {
	margin-left: 25rpx;
}

.wanl-cart-foot.edit button {
	margin-left: 20rpx;
}

.wanl-cart-foot.account .cu-btn {
	padding: 0 25rpx;
	font-size: 32rpx;
	height: 72rpx;
	margin-top: 6rpx;
	/* border-radius: 20rpx; */
}

.wanl-cart-foot.edit .cu-btn {
	padding: 0 30rpx;
	font-size: 24rpx;
	height: 56rpx;
}
</style>
